<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Search</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }

        :root {
            --fontColor: #d82019;
            --darkColor: #033d39;
        }

        .clearfix::after {
            content: '';
            display: table;
            clear: both;
        }

        .wfull {
            width: 100%;
        }

        .obc {
            object-fit: cover;
        }


        .hfull {
            height: 100%;
        }

    </style>
</head>
<body>


<style>
    .root {
        width: 80%;
        margin: auto;
    }

    body {
        background: var(--darkColor);
    }

    #input_search {
        width: 100%;
        padding: 15px;
        font-weight: bolder;
        font-size: larger;
        background: var(--darkColor);
        color: darkorange;
        outline: none;
        border: none;
        border: 1px solid darkorange;
    }

    #another_input_search {
        width: 100%;
        text-align: center;
        padding: 3px;
        font-weight: bolder;
        font-size: larger;
        background: var(--darkColor);
        color: darkgray;
        outline: none;
        border: none;
        border: 1px solid darkgray;
    }

    pre {
        font-weight: bolder;
        font-size: 20px;
        font-family: Consolas;
    }

    .search_item {
        border: 1px dotted lightgrey;
        padding: 10px;
        background: #fffcdb;
        margin-bottom: 35px;
        background: var(--darkColor);
        color: darkgray;
    }

    .edit_btn {
        float: right;
        padding: 10px;
    }

    /* 自定义选中文字的背景颜色和文字颜色 */
    ::selection {
        background: #ffcc00; /* 背景颜色 */
        color: #000000; /* 文字颜色 */
    }

    /* 适配 Firefox 浏览器的语法 */
    ::-moz-selection {
        background: #ffcc00; /* 背景颜色 */
        color: #000000; /* 文字颜色 */
    }

    .tag {
        padding: 6px;
        display: inline-block;
        margin: 5px;
        background: #fff351;
        border-radius: 3px;
        cursor: pointer;
    }

    .selected {
        background-color: #1f5550;
    }

    #suggestions li {
        padding: 12px;
        border-left: 1px dotted darkorange;
        border-right: 1px dotted darkorange;
        font-size: larger;
        font-weight: bolder;
        color: #ff7b00;
    }

    .score {
        float: right;
        font-size: 16px;
        color: darkgray;
        border-radius: 999px;
        text-align: right;
    }

    .hidden {
        display: none;
    }
</style>
<div class="root" id="app">
    <br>


    <!--  Automatic_completion  -->


    <h2 style="color: whitesmoke;  margin-bottom: 5px;  "> 一定要配置数据源, 也就是 txt 文本文件夹的位置 </h2>
    <header style="margin-bottom: 12px;  ">
        <a href="/" style=" color: #999; font-size: 32px;  display: inline-block;    margin-right:24px;  ">index</a>
        <a onclick="add_and_edit(this)" style="  cursor: pointer;  color: #999; font-size: 32px;  display: inline-block;  margin-right:24px;   ">Add_File</a>
        <a onclick="update_to_git(this)" style=" color: #999; font-size: 32px; text-decoration: underline; cursor: pointer;  display: inline-block;   margin-right:24px;   ">Update to Git</a>
        <a target="_blank" href="/config" style=" color: #999; font-size: 32px; text-decoration: underline; cursor: pointer;  display: inline-block;   margin-right:24px;   ">config</a>
        <a href="/" style=" color: #999; font-size: 32px; text-decoration: underline; cursor: pointer;  display: inline-block;   margin-right:24px;   ">自动补全</a>
    </header>

    <div style="text-align: center;  background:darkcyan;  padding: 8px;  position: fixed;  top: 10px; right: 10px;  width: 30%; " id="another_input_search_div" class="hidden   ">
        <input id="another_input_search" onkeydown="another_input_keyDown(event)" spellcheck="false" placeholder="回车搜索:"/>
    </div>
    <div>
        <input autofocus id="input_search" onkeydown="keyDown(event)" placeholder="搜索" spellcheck="false" autocomplete="off"/>
        <ul id="suggestions"></ul>
    </div>
    <br>
    <button onclick="show_all()" style=" padding: 12px 50px;  cursor: pointer;   ">展开所有</button>
    <span style=" color: darkorange;  padding: 12px;    "> 选中文字, Ctrl + b 新开搜索页面   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Ctrl + Alt 调出搜索框    </span>
    <br>
    <br>


    <div th:each="item, iterStat : ${search_result}" class="search_item   clearfix ">
        <a onclick="add_and_edit(this)" th:text="${item.name}" style="cursor:pointer; float: right;  padding: 5px;  color: darkgray;   border: 1px dotted lightgrey;  "></a>
        <a target="_blank" th:href="'/open-as-html-file/' + ${item.name}" style="cursor:pointer; float: right;  padding: 5px;  color: darkgray;   border: 1px dotted lightgrey; margin-right: 6px; ">Open In Browser</a>
        <div>
            <div>
                <h2 th:text="${item.title}" onclick="show_content_tag(this)" style="margin-bottom: 10px;  cursor: pointer;  "></h2>
                <span class="score " th:text="${item.score}" style="font-weight: bold; color: #fff351; "></span>
                <span class="score ">匹配得分 :  &nbsp;   </span>
                <span th:text="${item.name}"></span>
                <h2></h2>
            </div>
            <div class="wfull     hidden   search_item_content_tag   ">
                <pre th:text="${item.content}"></pre>
            </div>
        </div>
    </div>


    <div style="font-size: 22px;">
        <p style="color: whitesmoke; ">txt 存放地址: </p>
        <p th:text="${txt_folder}" style="color: whitesmoke; "></p>
    </div>


</div>

<div th:replace="Search/Add_update.html :: hidden_box"></div>

</body>
<!--    自动提示 补全 -->

<script th:inline="javascript">

    async function update_to_git(thisss) {
        thisss.style.display = "none";
        console.log(thisss);
        const respones = await fetch('/update_to_git');
        // const posts = await respones.json();
        console.log(respones);
    }

    // 给英文单词前后加 空格, 使看起来更加的美观
    function insert_spacing_for_english(str) {
        let p1 = /([A-Za-z_])([\u4e00-\u9fa5]+)/gi;
        let p2 = /([\u4e00-\u9fa5]+)([A-Za-z_])/gi;
        return str.replace(p1, "$1 $2").replace(p2, "$1 $2")
    }


    window.document.onkeydown = e => {
        let key = e.key.toLowerCase();
        if (e.ctrlKey && key === 'b') {
            let selectionText = document.getSelection().toString();
            console.log(selectionText);
            // window.location.href = "/search/" + selectionText;
            window.open("/search/" + selectionText);
        }
        if (e.ctrlKey && e.altKey) {
            console.log('alt + ctrl  ');
            document.getElementById("another_input_search_div").classList.toggle("hidden");
            document.getElementById("another_input_search").focus();
            document.getElementById("another_input_search").value = null;
        }
    };


    function show_content_tag(eee) {
        // 找到按钮对应的内容元素
        let content = eee.parentNode.nextElementSibling;
        // 切换隐藏状态
        content.classList.toggle('hidden');
    }

    function show_all() {
        let items = document.getElementsByClassName("search_item_content_tag");
        for (let i = 0; i < items.length; i++) {
            items[i].classList.remove("hidden");
        }
    }

    var search_result = [[${search_result}]];
    console.log(search_result);


    function another_input_keyDown(e) {
        let keycode = 0;
        keycode = e.which;
        if (keycode === 13) {
            let search_keyword = document.getElementById("another_input_search").value;
            search_keyword = insert_spacing_for_english(search_keyword);
            window.open("/search/" + search_keyword);
        }
    }

    function keyDown(e) {
        let keycode = 0;
        keycode = e.which;
        //  按下了回车键
        if (keycode === 13) {
            let search_keyword = document.getElementById("input_search").value;
            search_keyword = insert_spacing_for_english(search_keyword);
            window.location.href = "/search/" + search_keyword;
        }
    }


    console.log(window.location.href);
    var url = decodeURIComponent(window.location.href);
    url = url.split("/");
    document.getElementById("input_search").value = url[url.length - 1];


    <!--    自动补全   -->
    // 模拟的搜索建议数据
    // var suggestionsData = ['苹果', '香蕉', '橘子', '西瓜', '菠萝' , 'apple', 'demanding' , 'apple123'];
    // suggestionsData = [[${auto_complete_words}]];

    let suggestionsData = []  //
    for (let i = 0; i < localStorage.length; i++) {
        let key = localStorage.key(i);
        suggestionsData.push(key);
    }


</script>
<script src="/js/input_auto_complete.js"></script>
<script src="/js/add_edit.js"></script>
<script src="/js/delete.js"></script>
</html>

